import { Column, type ColumnConfig } from "@ant-design/plots";
import { Modal } from "antd";

interface Props {
  visible: boolean;
  title?: string;
  data?: IChartData[];
  year?: string;
  onCancel?: () => void;
  onOk?: () => void;
}

export interface IChartData {
  month: string;
  value: number;
  type: "税前" | "扣税" | "税后";
}

export default function ChannelRevenueChartModal(props: Props) {
  const _handler = {
    onCancel: () => {
      props.onCancel?.();
    },
    onOk: () => {
      props.onOk?.();
    },
  };
  const config: ColumnConfig = {
    width: 752,
    xField: "month",
    yField: "value",
    colorField: "type",
    group: {
      padding: 0,
    },
    labels: [
      {
        text: (record: any) => record.value || "",
        textBaseline: "bottom",
        // style: { dy: -30 },
        transform: [{ type: "overlapDodgeY" }, { type: "overlapHide" }],
      },
    ],
    style: {
      // 矩形四个方向的内边距
      // inset: 1,
      // 矩形单个方向的内边距
      // insetLeft:5,
      // insetRight:20,
      // insetBottom:10
      // insetTop:10
    },
  };

  return (
    <Modal
      title={`${props.title} 统计图`}
      open={props.visible}
      onCancel={_handler.onCancel}
      // onOk={_handler.onOk}
      width={800}
    >
      <div className="flex h-[500px] w-full">
        <Column {...config} data={props.data} />
      </div>
    </Modal>
  );
}
